<template>
  <Table :tableData="tableData" max-height="500px"
         border
         :headerStyle="{backgroundColor:'#fffbed'}" :table-column="tableColumn" :page="false"/>
</template>

<script>
import {notRefundDetail} from "@/api/finance";

export default  {
  props:['routesQuery'],
  name: "payBackDetails",
  data() {
    return {
      tableData: [],
      tableColumn: [
        {label: this.$t('应还款时间'), prop: 'refundDate', align: 'center', minWidth: 150},
        {label: this.$t('合同金额'), prop: 'passAmount', align: 'center', minWidth: 100},
        {label: this.$t('利息'), prop: 'interestAmount', align: 'center', minWidth: 100},
        {label: this.$t('逾期天数'), prop: 'overdueDay', align: 'center', minWidth: 100},
        {label: this.$t('逾期罚息'), prop: 'overdueFine', align: 'center', minWidth: 100},
        {label: this.$t('应还金额'), prop: 'refundAmount', align: 'center', minWidth: 100},
        {label: this.$t('已还金额'), prop: 'actualPayAmount', align: 'center', minWidth: 100},
        {label: this.$t('减免金额'), prop: 'remissionAmount', align: 'center', minWidth: 100},
        {label: this.$t('待还金额'), prop: 'notRefundAmount', align: 'center', minWidth: 100},
      ]
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    async getList() {
      const {orderId} = this.routesQuery
      const res = await notRefundDetail({
        loanRecordId: orderId
      })
      if (res.code === 1 && res.data) {
        this.tableData  = [res.data]
      }
    }
  }
}
</script>

<style scoped>

</style>
